<template>
	<view class="authbigbox" v-if="!hasRegister && show">
		<view class="_auth">
			<view class="authbox">
				<view class="a_tit">您还未授权</view>
				<view class="a_tit_">完善您的个人信息</view>
				<button class="authBtn loginBtn" v-if="canGetUserProfile" @click="getUserProfile">立即授权</button>
				<button class="authBtn loginBtn" open-type="getUserInfo" lang="zh_CN" v-else
					@click="getuserInfo">立即授权</button>
				<button class="authBtn notLogin" @click="show = false">暂不登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		version
	} from "@/common/config.js"
	import {
		mapState,
	} from 'vuex'
	export default {
		name: "auth",
		data() {
			return {
				version: version,
				show: false,
				canGetUserProfile: false
			};
		},
		computed: {
			...mapState(['hasRegister', 'userinfo', 'wxuserinfo'])
		},
		beforeCreate() {
			if (this.wxuserinfo) {
				this.show = false
				uni.showModal({
					title: "提示",
					content: "已授权成功，是否去注册账号",
					showCancel: true,
					success: res => {
						if (res.confirm) {
							uni.navigateTo({
								url: "/components/getphone/getphone"
							})
						}
					}
				})
			}
		},
		mounted() {
			if (uni.getUserProfile) {
				this.canGetUserProfile = true
			}
		},
		methods: {
			goGetPhone() {
				if (this.wxuserinfo) {
					this.show = false
					uni.showModal({
						title: "提示",
						content: "已授权成功，是否去注册账号",
						showCancel: true,
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/components/getphone/getphone"
								})
							}
						}
					})
				}
			},
			getUserProfile() {
				// #ifdef MP-WEIXIN
				uni.getUserProfile({
					desc: "为了更好的为您服务",
					success: res => {
						this.$store.commit('setwxuserinfo', res.userInfo)
						let userinfo = this.$store.state.userinfo
						userinfo.headimgurl = res.userInfo.avatarUrl
						userinfo.nickname = res.userInfo.nickName
						this.$store.commit('setUserInfo', userinfo)
						this.$emit('successInfo', res.userInfo)
						this.show = false
						this.goGetPhone()
					}
				})
				// #endif
			},
			getuserInfo(e) {
				// #ifdef MP-WEIXIN
				uni.getSetting({
					success: res => {
						if (res.authSetting['scope.userInfo']) {
							uni.getUserInfo({
								provider: 'weixin',
								success: ginfo => {
									this.$store.commit('setwxuserinfo', ginfo.userInfo);
									this.$emit('successInfo', ginfo.userInfo)
									this.show = false
									this.goGetPhone()
								},
								fail: err => {
									console.log(err)
									this.$Toast.none("微信登录授权失败")
								}
							})
						}
					}
				})
				// #endif
			},
			checkLogin() {
				// #ifdef MP-WEIXIN
				this.show = !this.hasRegister;
				// #endif
				// #ifdef H5
				if(!this.version.embedded) {
					!this.hasRegister && (uni.navigateTo({
						url: "/pages/login/login"
					}))
				}
				// #endif
			}
		}
	}
</script>

<style scoped>
	.authbigbox {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
	}

	._auth {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 10000;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .6);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.authbox {
		width: 75%;
		min-height: 500rpx;
		background-color: white;
		border-radius: 40rpx;
		overflow: hidden;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.a_tit {
		text-align: center;
		font-size: 36rpx;
		color: black;
		font-weight: bold;
	}

	.a_tit_ {
		margin: 20rpx auto 0;
		text-align: center;
		font-size: 28rpx;
		color: gray;
		margin-bottom: 180rpx;
	}

	.authBtn {
		margin: 0 auto;
		width: 80%;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 70rpx;
		font-size: 32rpx;
	}

	.loginBtn {
		border: 2rpx solid red;
		background-color: red;
		color: white;
	}

	.notLogin {
		margin: 20rpx auto 0;
		border: 2rpx solid red;
		background-color: white;
		color: red;
	}
</style>
